<template>
  <div>
    <div class="total">
      <div class="item">
        <div class="left">
          <div class="top-number">
            <CountTo :start-val="0"
              :end-val="dataList?.kyss?.total??0"
              :duration="2600"
              class="top-number" />
          </div>
          <div class="desc">科研设施</div>
        </div>
        <div class="right">
          <div class="top-number">
            <CountTo :start-val="0"
              :end-val="dataList?.kyss?.monthIncrCount??0"
              :duration="2600"
              class="top-number" />
            <!-- 0-上涨 1-下跌 2-持平 -->
            <i :class="classList[dataList?.kyss?.incrType ??0].value">
            </i>
          </div>
          <div class="desc">本月新增</div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="top-number">
            <CountTo :start-val="0"
              :end-val="dataList?.yqsb?.total??0"
              :duration="2600"
              class="top-number" />
          </div>
          <div class="desc">仪器设备</div>
        </div>
        <div class="right">
          <div class="top-number">
            <CountTo :start-val="0"
              :end-val="dataList?.yqsb?.monthIncrCount??0"
              :duration="2600"
              class="top-number" />
            <i :class="classList[dataList?.yqsb?.incrType ??0].value"></i>
          </div>
          <div class="desc">本月新增</div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="top-number">
            <CountTo :start-val="0"
              :end-val="dataList?.rjxt?.total??0"
              :duration="2600"
              class="top-number" />
          </div>
          <div class="desc">软件系统</div>
        </div>
        <div class="right">
          <div class="top-number">
            <CountTo :start-val="0"
              :end-val="dataList?.rjxt?.monthIncrCount??0"
              :duration="2600"
              class="top-number" />
            <i :class="classList[dataList?.rjxt?.incrType ??0].value">
            </i>
          </div>
          <div class="desc">本月新增</div>
        </div>
      </div>
      <!-- <div class="item">
        <div class="left">
          <div class="top-number">
            <CountTo :start-val="0"
              :end-val="dataList?.jfze?.total??0"
              :duration="2600"
              class="top-number" />
          </div>
          <div class="desc">经费总额(亿)</div>
        </div>
        <div class="right">
          <div class="top-number">
            <CountTo :start-val="0"
              :end-val="dataList?.jfze?.monthIncrCount??0"
              :duration="2600"
              class="top-number" />
            <i :class="classList[dataList?.jfze?.incrType ??0].value">
            </i>
          </div>
          <div class="desc">本月新增</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  props: {
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      dataList: {},
      classList: {
        0: { value: 'up el-icon-top' },
        1: { value: 'down el-icon-bottom' },
        2: { value: 'line el-icon-right' }
      }
    }
  },
  mounted() {
    this.initMessage()
  },
  methods: {
    initMessage() {
      this.dataList = {
        kyss: {
          total: 265,
          monthIncrCount: 2,
          incrType: 0
        },
        yqsb: {
          total: 3265,
          monthIncrCount: 34,
          incrType: 0
        },
        rjxt: {
          total: 874,
          monthIncrCount: 12,
          incrType: 2
        },
        jfze: {
          total: 2.4,
          monthIncrCount: 1200,
          incrType: 2
        }
      }
      // getMonthStatistics({ year: this.year }).then(res => {
      //   this.dataList = res?.data ?? {}
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.total {
  height: 80px;
  display: flex;
  justify-content: space-between;
  .item {
    width: 32%;
    padding: 12px 20px;
    display: flex;
    background: url('~@/assets/img/card.png') no-repeat center;
    background-size: 100% 100%;
    &::before {
      display: inline-block;
      content: ' ';
      width: 1px;
    }
    .top-number {
      position: relative;
      font-size: 26px;
      color: #fff;
      font-weight: 700;

      .up,
      .down,
      .line {
        color: #ff3e3e;
        font-size: 16px;
      }
      .down {
        color: #0feb5b;
      }
      .line {
        color: #00a6ff;
      }
    }
    .desc {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #7cb4ff;
      font-weight: 400;
    }
    .left {
      width: 50%;
      padding-right: 8px;
      border-right: 1px solid #2663ab;
    }
    .right {
      width: 50%;
      margin-left: 20px;
      .desc {
        width: 56px;
      }
    }
  }
}
</style>